<template>
  <div class="container">
    <el-input class="sea" v-model="stuid" placeholder="学号搜索"></el-input>
    <el-button class="btn" @click="query">查询</el-button>
    <el-button :loading="btnLoading" class="btn" @click="DowloadFile">导出</el-button>
    <input type="file" id="file" webkitdirectory directory hidden @change="fileChange">
  </div>
</template>

<style scoped>
.container {
  /* background-color: #fff; */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
/* .sea{
        width: 30%;
    } */
.btn {
  height: 10%;
}
</style>

<script>
import axios from "axios";
export default {
  data() {
    return {
      stuid: "",
      btnLoading:false,
    };
  },
  methods: {
    query() {
      this.$emit("search", this.stuid);
    },
    // 下载中
    dowloadsucc() {
        this.$notify({
          title: '正在导出····',
          message: '正在导出文件,请耐心等待,不要频繁操作',
          type: 'success'
        });
      },
    // 选择目录
    chooseDic(){
        document.getElementById("file").click()
    },
    fileChange(event){
        console.log(event)
        let file = event.target.files;
        console.log(file)
    },
    DowloadFile() {
        this.btnLoading=true
        this.dowloadsucc()
    //   this.chooseDic()
      axios.get("http://127.0.0.1:8000/student/download/",{ responseType: "blob" }).then((res) => {
        console.log(res);
        const content = res.data;
        const blob = new Blob([content],{type: "application/vnd.ms-excel"});
        const fileName = "导出信息.xls";
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
        this.btnLoading=false
      });
    },
  },
};
</script>
